$(() => {
   
    



    let $ul = $(".list-group");
    // 发送请求获取第一页的数据


    // 封装请求函数
    function getPageInfo(page) {
        $.ajax({
            url: "/php/getGoods.php",
            type: "get",
            data: {
                page,
                pageCount: 28
            },
            dataType: "json",
            success({ error, data }) {
                if (!error) {
                    // 清空
                    $ul.empty();
                    // 提示
                    Dreamer.success("请求数据成功");
                    // 循环渲染页面
                    data.forEach(value => {
                        $ul.append(`<li class="list-group-item col-lg-3">
                        <div class="panel panel-default">
                            <div class="panel-heading ">${value.cat_id}</div>
                            <div class="panel-body">
                                <a href="./detail.html?id=${value.goods_id}"><img alt="图片走丢了" title="" src="${value.goods_small_logo}" alt=""></a>
                                <p class="h5">${value.goods_name}</p>
                                <p class="price">¥:${value.goods_price}</p>
                            </div>
                        </div>
                    </li>`)
                    })
                    return;
                }
                Dreamer.warning(data);
            }
        })
    }



    // 请求第一页的数据
    getPageInfo(0);
    // 一进入这个页面就立刻改变历史记录
    history.replaceState("", "", "#" + 0);

    // 初始化分页
    $('.pageTest').page({
        leng: 26, //分页总数     
        activeClass: 'activP', //active 类样式定义     
        clickBack: function (page) {
            history.pushState("", "", "#" + (page - 1))
            getPageInfo(page - 1);
        }
    })



    // 当前的问题：没有办法让浏览器记住ajax的操作 所以一旦后退会退到上一个页面  而不是上一页数据
    // HTML5中对history进行了增强  新增了 go()  pushState() replaceState()
    // pushState方法可以改变历史记录


    // 监听历史记录的变化 onpopstate 方法  
    window.onpopstate = function () {
        console.log("历史记录发生了变化")
        var hash = location.hash;
        var page = hash.slice(1);
        getPageInfo(page);
    }

});